<layout name="site" />
<style type="text/css">
  body {
    background: url(__STYLE__/Activity/Egg/egg_bg.jpg);
  }
  .slide { display:none;}
  .container {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .activity-title {
    border-bottom: 1px solid #f60;
    padding: 5px;
  }
  .smash-egg {
    padding: 30px 0 10px 0;
  }
  .smash-egg ul {
    position: relative;
    margin: 0 auto;
    width: 240px;
  }
  .smash-egg li {
    float: left;
    background: url(__STYLE__/Activity/Egg/egg_1.png) no-repeat;
    width: 80px;
    height: 94px;
    -webkit-animation: egg 1s ease-in-out infinite;
       -moz-animation: egg 1s ease-in-out infinite;
        -ms-animation: egg 1s ease-in-out infinite;
            animation: egg 1s ease-in-out infinite;
  }
  .smash-egg b {
    font-size: 30px;
    line-height: 90px;
    display: block;
    color: #ffcc22;
    text-align: center;
    font-weight: bold;
  }

  /*金蛋自动蹦跶*/
  @-webkit-keyframes egg {
    0% {
      -webkit-transform: translate(0,0px);
    }
    20% {
      -webkit-transform: translate(0,5px);
    }
    50% {
      -webkit-transform: translate(0,0px);
    }
    70% {
      -webkit-transform: translate(0,5px);
    }
    100% {
      -webkit-transform: translate(0,0px);
    }
  }

  @-ms-keyframes egg{
    0% {
      -ms-transform: translate(0,0px);
    }
    20% {
      -ms-transform: translate(0,5px);
    }
    50% {
      -ms-transform: translate(0,0px);
    }
    70% {
      -ms-transform: translate(0,5px);
    }
    100% {
      -ms-transform: translate(0,0px);
    }
  }
  
  @-moz-keyframes egg{
    0% {
      -moz-transform: translate(0,0px);
    }
    20% {
      -moz-transform: translate(0,5px);
    }
    50% {
      -moz-transform: translate(0,0px);
    }
    70% {
      -moz-transform: translate(0,5px);
    }
    100% {
      -moz-transform: translate(0,0px);
    }
  }
  
  @keyframes egg {
    0% {
      transform: translate(0,0px);
    }
    20% {
      transform: translate(0,5px);
    }
    50% {
      transform: translate(0,0px);
    }
    70% {
      transform: translate(0,5px);
    }
    100% {
      transform: translate(0,0px);
    }
  }
  
  /*锤子自动砸蛋*/
  @-webkit-keyframes hammer {
    0% {
      -webkit-transform: rotate(0deg);
    }
    20% {
      -webkit-transform: rotate(-20deg);
    }
    50% {
      -webkit-transform: rotate(-10deg);
    }
    70% {
      -webkit-transform: rotate(-5deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
    }
  }

  @-ms-keyframes hammer {
    0% {
      -ms-transform: rotate(0deg);
    }
    20% {
      -ms-transform: rotate(-20deg);
    }
    50% {
      -ms-transform: rotate(-10deg);
    }
    70% {
      -ms-transform: rotate(-5deg);
    }
    100% {
      -ms-transform: rotate(0deg);
    }
  }
  
  @-moz-keyframes hammer{
    0%{
      -moz-transform: rotate(0deg);
    }
    20%{
      -moz-transform: rotate(-20deg);
    }
    50%{
      -moz-transform: rotate(-10deg);
    }
    70%{
      -moz-transform: rotate(-5deg);
    }
    100%{
      -moz-transform: rotate(0deg);
    }
  }
  
  @keyframes hammer{
    0%{
      transform: rotate(0deg);
    }
    20%{
      transform: rotate(-20deg);
    }
    50%{
      transform: rotate(-10deg);
    }
    70%{
      transform: rotate(-5deg);
    }
    100%{
      transform: rotate(0deg);
    }
  }

  #hammer {
    background: url(__STYLE__/Activity/Egg/img-6.png) no-repeat;
    width: 50px;
    height: 58px;
    position: absolute;
    z-index: 100;
    top: -25px;
    left: 55px;
    -webkit-animation: hammer .8s ease-in-out infinite;
       -moz-animation: hammer .8s ease-in-out infinite;
        -ms-animation: hammer .8s ease-in-out infinite;
            animation: hammer .8s ease-in-out infinite;
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
        -ms-transform-origin: bottom;
            transform-origin: bottom;
  }

  /*弹出框*/
    .overlay {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: rgba(255,255,255,.3);
    }
    #dialog {
      position: absolute;
      top: -100%;
      display: none;
      opacity: 0;
      width: 300px;
      margin: 0 auto;
      border: 1px solid #999;
      border-radius: 5px;
      box-shadow: 0 3px 7px rgba(0,0,0,.3);
      background-color: #fff;
      z-index: 101;
      -webkit-transition: top .3s ease-in-out, opacity .5s ease-in-out;
         -moz-transition: top .3s ease-in-out, opacity .5s ease-in-out;
          -ms-transition: top .3s ease-in-out, opacity .5s ease-in-out;
              transition: top .3s ease-in-out, opacity .5s ease-in-out;
    }
    #dialog .msg {
      padding: 15px;
    }
    #dialog .button {
      border-top: 1px solid #ccc;
      background-color: #eee;
      padding: 5px;
      text-align: right;
      border-radius: 0 0 5px 5px;
      box-shadow: inset 0 1px 0 #ffffff;
    }
    #dialog .button a {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px;
      background-color: #369;
      cursor: pointer;
      color: #fff;
    }
    #dialog .button a:active {
      background-color: #325FB9;
    }

    .content {
      background-color: #fef8b2;
      width: 290px;
      margin: 10px auto;
      padding: 6px 0;
      border-radius: 6px;
      box-shadow: 0 2px 5px #555;
      color: #595959;
    }
    .content .title {
      width: 114px;
      height: 28px;
      line-height: 28px;
      margin-left: -5px;
      background: url("__COMMON__/images/title-bg.png") no-repeat;
      text-align: center;
      color: #fff;
      font-size: 1.5rem;
    }
    .content p {
      padding: 0 15px;
      margin: 5px 0;
    }
    #result {
      display: none;
      color: #f00;
    }
    
	a[target="_blank"]:after {
		content: "";
		display: inline-block;
		font-weight: normal;
		font-size: 1rem;
	}
</style>

<style type="text/css"> 
	#scroll_div{width:290px;height:30px;margin: 0px auto;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';color:#0C77CF;font-weight:bold;} 
	#scroll_begin, #scroll_end{display:inline} 
</style>

<div class="container">
  <h3 class="activity-title">{$activity.name}</h3>
  <div id="smash-egg" class="smash-egg">
    <ul class="clearfix">
      <span id="hammer"></span>
      <li><b>1</b><span></span></li>
      <li><b>2</b><span></span></li>
      <li><b>3</b><span></span></li>
    </ul>
  </div>
  
	<div style="height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div"> 
		<div id="scroll_begin"> 
		    <volist id="vo" name="activity.prizeRecord">
		       <a href="#" target="_blank"><span style="color:#f00; font-size: 15px;">"{$vo['userName']}"喜中{$vo['prize']}等奖.&nbsp;&nbsp;&nbsp;</span></a>
		    </volist>
		</div> 
		<div id="scroll_end"></div> 
	</div> 
  
  <div class="content" id="result">
    <h3 class="title">中奖结果：</h3>
    <p></p>
  </div>
  
  <section class="content">
    <h3 class="title">活动说明</h3>
    <p>{$activity.intro}</p>
  </section>
  
  <section class="content">
    <h3 class="title">奖项设置</h3>
    <volist name="activity.prize_config" id="vo">
    <p><span>{$vo.title}</span>&nbsp;&nbsp;共<b>{$vo.total}</b>名&nbsp;&nbsp;奖品为<b>{$vo.prizeName}</b></p>
    </volist>
  </section>
  
  <section class="content">
    <h3 class="title">活动时间</h3>
    <p>开始时间：{$activity.begin_time|date='Y-m-d H:i', ###}</p>
    <p>结束时间：{$activity.end_time|date='Y-m-d H:i', ###}</p>
  </section>
  
</div>

<!-- 弹框内容 -->
<div id="dialog">
  <p class="msg"></p>
  <p class="button"><a href="javascript:void(0)">确定</a></p>
</div>

<script type="text/javascript">

  function ScrollImgLeft() {
	var speed=50; 
	var scroll_begin = document.getElementById("scroll_begin"); 
	var scroll_end = document.getElementById("scroll_end"); 
	var scroll_div = document.getElementById("scroll_div"); 
	var _width = scroll_begin.offsetWidth;
	if ( 290 > _width) {
		return;
	}
	scroll_end.innerHTML=scroll_begin.innerHTML; 
	function Marquee(){ 
		if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
			scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
		else 
			scroll_div.scrollLeft++; 
	} 
	var MyMar=setInterval(Marquee,speed); 
  } 

  ScrollImgLeft();

  var oEgg = document.getElementById("smash-egg"),
      oHammer = document.getElementById("hammer"),
      oLoading = document.getElementById("loading");
      oLi = oEgg.getElementsByTagName("li");
      
  var id = {$activity.id},
      sid = {$sid};
  
  var prize = "{$activity.activityRecord.prize}" * 1,
      prizeCn = "{$activity.activityRecord.title}",
      hidId = "{$activity.activityRecord.hit_id}" * 1,
      times = "{$activity.activityRecord.times}"*1;
  
  // 如果已经中奖
  if( prize ) {
    var oRes = document.getElementById("result");
    var aResP = oRes.getElementsByTagName("p")[0];
    aResP.innerHTML = "恭喜您已经获得<b>" + prizeCn + "</b>请快去领奖吧！";
    oRes.style.display = "block";
    oHammer.style.display = "none";
    oLi[hidId-1].style.background = "url(__STYLE__/Activity/Egg/egg_2.png) no-repeat";
  } else {
    for( var i = 0, item = null; item = oLi[i]; i++ ) {
      item.index = i + 1;
      item.addEventListener( "click", hitEgg, false );
    };  
  }
  
  // 砸金蛋执行函数
  function hitEgg() {
    // 让锤子到砸的鸡蛋那里去
    oHammer.style.left = this.offsetLeft + 60 + "px";
    // 发送信息
    var _this = this;
    GH.ajax("__CONTROLLER__/savePost", { "id": id, "hit_id": this.index, "sid": sid }, function( data ) {
      if ( data.error ) {
        dialog( data.error );
      } else if ( data.prize ) {
        oHammer.style.display = "none";
        _this.style.background = "url(__STYLE__/Activity/Egg/egg_2.png) no-repeat";
        dialog( "恭喜您砸中了<b>" + data.title + "</b>，请快去领奖吧" );
      } else {
        dialog( "很遗憾您没有中奖，祝您下次好运" );
      };
    });
  };
  
  // 往弹出框添加内容并显示
  function dialog( msg ) {
    var oD = document.getElementById( "dialog" ),
        aMsg = oD.getElementsByTagName("p")[0],
        aBtn = oD.getElementsByTagName("a")[0];
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    //添加透明白色背景
    var overlay = document.createElement( "div" );
    overlay.className = "overlay";
    document.body.appendChild( overlay );
    aMsg.innerHTML = msg;
    oD.style.display = "block";
    oD.style.opacity = 1;
    oD.style.left = ( document.documentElement.clientWidth - oD.offsetWidth ) / 2 + "px";
    oD.style.top = ( document.documentElement.clientHeight - oD.offsetHeight ) / 2 + scrollTop + "px";
    aBtn.onclick = function() {
      oD.style.display = "none";
      oD.style.opacity = 0;
      oD.style.top = "-100%";
      document.body.removeChild( overlay );
    };
  };
</script>